<template>
  <div>
    <!-- 评估项管理模块 -->
    <div id="headA">
      <div id="head">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: 'welcome' }">养老服务管理系统</el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #666666;">配置管理</span></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: 'PingGuMoBan' }"><span style="color: #666666;">评估模板管理</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #3C763D;">评估项管理</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div id="PGXGLshang">
      <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
      <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: -10px;">
        <el-form-item label="评估项名称：" id="PGXGLshangc">
          <el-input v-model="formInline.pgname" placeholder="" id="PGXGLshanga"></el-input>
        </el-form-item>
        <el-form-item label="评估项类别：" id="PGXGLshangc">
          <el-select v-model="formInline.pgleibie"  clearable size="small" placeholder="请选择">
            <el-option label="视、听觉" value="视、听觉"></el-option>
            <el-option label="情绪行为" value="情绪行为"></el-option>
            <el-option label="认知能力" value="认知能力"></el-option>
            <el-option label="日常生活活动" value="日常生活活动"></el-option>
            <el-option label="社会生活环境参数" value="社会生活环境参数"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit" id="PGXGLshangb">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="PGXGLxia">
      <div style="margin-left: 28px; padding-top: 20px; padding-bottom: 15px;">
        <el-row>
          <el-button size="small" type="success" @click.native="onAdd" plain>新建</el-button>
          <el-button size="small" type="primary" @click.native="onCha()" plain>查看</el-button>
          <el-button size="small" type="warning" @click.native="onXiu()" plain>修改</el-button>
          <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="dels">
            <el-button type="danger" slot="reference" size="small" style="margin: 10px;" plain>删除</el-button>
          </el-popconfirm>
          <el-button size="small" type="success" @click.native="onQi()" plain>启用</el-button>
          <el-button size="small" type="primary" @click.native="onJin()" plain>禁用</el-button>
          <el-button size="small" type="warning" @click.native="xiangZhiGuanLi" plain>项值管理</el-button>
          <el-button size="small" type="danger" @click.native="onFanHui()" plain>返回</el-button>
        </el-row>
      </div>
      <div>
        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="90" label="序号" :index="indexAdd"></el-table-column>
          <el-table-column prop="pgname" label="评估项名称" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="所属模板" width="200">
            <template slot-scope="scope">{{ scope.row.mobanname }}</template>
          </el-table-column>
          <el-table-column label="评估项类别" prop="pgleibie" width="150"></el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">{{ scope.row.status == 0 ? '启用' : '禁用' }}</template>
          </el-table-column>
          <el-table-column prop="miaoshu" label="描述" width="200" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="block" style="margin-top: 20px; margin-left: 30px;">
      <el-pagination
        @size-change="xianshi"
        @current-change="yema"
        :current-page="formInline.dqNum"
        :page-sizes="[10, 20, 50]"
        :page-size="formInline.xsNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div>
      <!-- 新增修改信息模块 ------------------------------------------------------------>
      <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :append-to-body="true">
        <el-form :model="form1" :rules="rules" ref="form1" >
          <div id="PGXGLshangd">
            <el-form-item id="PGXGLshange" label="评估项名称：" prop="pgname" :label-width="formLabelWidth">
              <el-input size="mini" v-model="form1.pgname" autocomplete="off" placeholder=""></el-input>
            </el-form-item>
          </div>
          <div style=" width: 320px; height: 100px; margin-top: -36px; margin-left: 300px;">
            <el-form-item label="评估项类别：" id="PGXGLshangg" prop="pgleibie">
              <el-select v-model="form1.pgleibie" clearable size="small" placeholder="请选择" id="PGXGLshangh">
                <el-option label="视、听觉" value="视、听觉"></el-option>
                <el-option label="情绪行为" value="情绪行为"></el-option>
                <el-option label="认知能力" value="认知能力"></el-option>
                <el-option label="日常生活活动" value="日常生活活动"></el-option>
                <el-option label="社会生活环境参数" value="社会生活环境参数"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="状态:" id="PGXGLshangf" prop="status">
            <el-radio v-model="form1.status" :label="0">启用</el-radio>
            <el-radio v-model="form1.status" :label="1">禁用</el-radio>
          </el-form-item>
          <el-form-item label="描述:" style="margin-left: 62px;">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form1.miaoshu" style="width: 350px; margin-top: -20px; margin-left: 7px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addPingGuXiangGuanLi('form1')" v-show="isAdd">确 定</el-button>
          <el-button type="primary" @click="editPingGuXiangGuanLi('form1')" v-show="!isAdd">保 存</el-button>
          <el-button @click="dialogFormVisible=false">取 消</el-button>
        </div>
      </el-dialog>
      <div>
        <el-drawer title="查看" :visible.sync="dialog" direction="ltr" :append-to-body="true" custom-class="demo-drawer" ref="drawer">
          <div class="demo-drawer__content">
            <el-form :model="formc">
              <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 0px;">
                <el-form-item label="评估项名称：" :label-width="formcLabelWidth">
                  <el-input v-model="formc.pgname" autocomplete="off" disabled size="small"></el-input>
                </el-form-item>
              </div>
              <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 0px;">
                <el-form-item label="评估项类别：" :label-width="formcLabelWidth">
                  <el-input v-model="formc.pgleibie" autocomplete="off" disabled size="small"></el-input>
                </el-form-item>
              </div>
              <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px;">
                <el-form-item label="状态：" :label-width="formcLabelWidth" >
                  <el-input v-model="formc.status" autocomplete="off" disabled size="small"></el-input>
                </el-form-item>
              </div>
              <div style="width:300px; height: 40px; margin-left: 21px; margin-top: 20px;">
                <el-form-item label="添加时间：" :label-width="formcLabelWidth">
                  <el-input v-model="formc.createdate" autocomplete="off" disabled size="small"></el-input>
                </el-form-item>
              </div>
              <div style="width:300px; height: 40px; margin-left: 20px; margin-top: 20px; float: left;">
                <el-form-item label="描述:">
                  <el-input type="textarea" disabled :autosize="{ minRows: 2, maxRows: 4}" v-model="formc.miaoshu" style="width: 250px; margin-top: -45px; margin-left: 50px; float: right;"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <div class="demo-drawer__footer" style="margin-left: 160px; margin-top: 90px;">
              <el-button @click="cancelForm">取 消</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      formInline: {
        pgname: '',
        pgleibie: '',
        dqNum: 1,
        xsNum: 10,
      },
      tableData: [{
        noid: '',
        pgname: '',
        pgleibie: '',
        status: '',
        miaoshu: '',
        mobanname: '',
      }],
      form1: {
        mobanid: '',
        pgname: '',
        pgleibie: '',
        status: '',
        miaoshu: '',
        createdate: '',
        updatedate: '',
      },
      formc: {
        pgname: '',
        pgleibie: '',
        status: '',
        miaoshu: '',
        createdate: '',
      },
      rules: {
        pgname: [
          { required: true, message: '请输入评估项名称', trigger: 'blur' }
        ],
        pgleibie: [
          { required: true, message: '请选择评估类别', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
      },
      zhuid: '',
      total: 0,
      isAdd: true,
      dialogFormVisible: false,
      formLabelWidth:'200px',
      formcLabelWidth: '100px',
      multipleSelection: [],
      visible: false,
      dialog: false,
      loading: false,
    }
  },
  methods: {
    chaxun(){
      let all = {
        pgname: this.formInline.pgname,
        pgleibie: this.formInline.pgleibie,
        dqNum: 1,
        xsNum: 10,
        zhuid: this.zhuid
      }
      axios.post("/chain-api/pingguxiangguanli/page", all).then(res=>{
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    onSubmit(){
      this.formInline.dqNum = 1;
      this.chaxun();
    },
    onAdd(){
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.form1.mobanid = '';
      this.form1.pgname = '';
      this.form1.pgleibie = '';
      this.form1.status = '';
      this.form1.miaoshu = '';
      this.form1.createdate = '';
      this.form1.updatedate = '';
    },
    addPingGuXiangGuanLi(form1){
      this.$refs[form1].validate((valid) => {
        if (valid) {
          this.isAdd = false;
          this.dialogFormVisible = false;
          this.form1.createdate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
          this.form1.mobanid = this.zhuid;
          axios.post("/chain-api/pingguxiangguanli/addpingguxiangguanli", this.form1).then(res=>{
            if (res.data.code) {
              this.$message('增加成功');
            } else {
              this.$message('增加失败');
            }
            this.onSubmit();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onQi(){
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length > 1) {
        this.$message.error("只能选择一条数据！")
        this.onSubmit();
      } else {
        var aid = ids[0];
        axios.get("/chain-api/pingguxiangguanli/qidong/" + aid).then(res=>{
          if (res.data.code) {
            this.$message('启动成功');
          } else {
            this.$message('启动失败');
          }
          this.onSubmit();
        });
      }
    },
    onJin(){
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length > 1) {
        this.$message.error("请选择一条数据！")
        this.onSubmit();
      } else {
        var aid = ids[0];
        axios.get("/chain-api/pingguxiangguanli/jinyong/" + aid).then(res=>{
          if (res.data.code) {
            this.$message('禁用成功');
          } else {
            this.$message('禁用失败');
          }
          this.onSubmit();
        });
      }
    },
    onCha(){
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length != 1) {
        this.$message.error("请选择一条数据！")
        this.onSubmit();
      } else {
        var aid = ids[0];
        this.dialog = true;
        axios.get("/chain-api/pingguxiangguanli/" + aid).then(res=>{
          this.formc = res.data.data;
          if (this.formc.status == 0) {
            this.formc.status = '启用';
          } else {
            this.formc.status = '禁用';
          }
        });
      }
    },
    onXiu(){
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length != 1) {
        this.$message.error("请选择一条数据！")
        this.onSubmit();
      } else {
        var aid = ids[0];
        this.isAdd = false;
        this.dialogFormVisible = true;
        axios.get("/chain-api/pingguxiangguanli/" + aid).then(res=>{
          this.form1 = res.data.data;
        });
      }
    },
    editPingGuXiangGuanLi(form1){
      this.$refs[form1].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form1.updatedate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date()),
          axios.put("/chain-api/pingguxiangguanli/updatepgxgl",this.form1).then(res=>{
            if (res.data.code) {
              this.$message('修改成功');
            } else {
              this.$message('修改失败');
            }
            this.onSubmit();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除
    dels() {
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length == "") {
        this.$message.error("请选择！")
        this.onSubmit();
      } else {
        axios.post("/chain-api/pingguxiangguanli/dels", ids).then(res => {
          if (res.data.code) {
            this.$message.success("批量删除成功！")
            this.onSubmit()
          } else {
            this.$message.error("批量删除失败！")
            this.onSubmit()
          }
        })
      } 
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    xianshi(a){
      this.formInline.xsNum = a;
      this.chaxun();
    },  
    yema(a){
      this.formInline.dqNum = a;
      this.chaxun();
    },
    xiangZhiGuanLi(){
      let ids = this.multipleSelection.map(value => value.noid)
      if (ids.length != 1) {
        this.$message.error("请选择一条数据！")
        this.onSubmit();
      } else {
        var aid = ids[0];
        this.$router.push({
          path:"/main/xiangZhiGuanLi",
          query:{daid: aid, zhuid: this.zhuid}
        })
      }
    },
    onFanHui(){
      this.$router.push("/main/PingGuMoBan");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // type序号 - 页面切换递增
    indexAdd(index) {
      const dq = this.formInline.dqNum; // 当前页码
      const xs = this.formInline.xsNum; // 每页条数
      return index + 1 + (dq - 1) * xs;  // 下标 + 1 + (当前页码 - 1) * 当前页显示的条数
    },
  },
  mounted(){
    this.zhuid = this.$route.query.zhuid;
    this.chaxun()
  }
}
</script>

<style scope>
#head{
  width: 1050px;
  height: 25px;
  padding-left: 20px;
  padding-top: 10px;
  margin-left: 20px;
  border: 8px groove skyblue;
  background-color: #DFF0D8;
}
#headA{
  padding-top: 10px;
  padding-bottom: 10px;
}
#PGXGLshang{
  width: 1090px;
  height: 110px;
  margin-left: 20px;
  background-color: #FFFFFF;
}
#PGXGLxia{
  width: 1090px;
  height: 350px;
  margin-top: 25px;
  margin-left: 20px;
  background-color: #FFFFFF;
}
#PGXGLshanga{
  width: 100px;
  height: 30px;
}
#PGXGLshangb{
  font-size: 14px;
  background-color: #18A689;
  margin-top: 27px;
  margin-left: 18px;
}
#PGXGLshangc{
  margin-top: 25px;
  margin-left: 25px;
}
#PGXGLshangd{
  width: 350px;
  height: 40px;
  margin-top: -25px;
  margin-left: -84px;
}
#PGXGLshange{
  display: inline;
  width: 400px;
  height: 40px;
}
#PGXGLshangf{
  width: 340px;
  height: 40px;
  margin-top: -55px;
  margin-left: 60px;
  margin-right: 0px;
}
#PGXGLshangg{
  width: 310px;
  height: 90px;
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
#PGXGLshangh{
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 10px;
  padding-right: 0px;
}
</style>